<template>
    <div class="root" ref="root">
        <div class="nav-wrapper-lefttoright">
<!--             <div class="nav-sidebar" v-show="!shrinkPage">
                <div class="title-wrapper-one">
                    <div class="title-icon">
                        <img src="../assets/logo.png" alt="" class="icon-img">
                    </div>
                    <div class="title-text-one">
                        <span>时间胶囊</span>
                    </div>
                </div>
                <div class="sidebar-content">
                    <div class="content-btn">
                        <van-icon name="manager" style="marginRight: 6px; marginTop: 3px; color: #4093de;"/>
                        <span>活动管理</span>
                    </div>
                    <div class="report-btn" @click="eyeActivity">
                        <van-icon name="eye" style="marginRight: 6px; marginTop: 3px;"/>
                        <span>举报管理</span>
                    </div>
                </div>
            </div> -->
            <div class="nav-body">
                <div class="nav-header">
                    <div class="mobile-icon" @click="beforeShowNav">
                        <van-icon name="bars" size="27"/>
                    </div>
                    <div class="title-wrapper-two">
                        <div class="title-text-two">
                            <span>&nbsp;&nbsp;后台管理系统</span>
                        </div>
                        <div class="title-text-three">
                            <span>&nbsp;/</span>
                        </div>
                        <div class="title-text-four">
                            <span>&nbsp;活动管理</span>
                        </div>
                    </div>
                </div>
                <div class="nav-content">
                    <div class="list-top">
                        <div class="condition-wrapper">
                            <div class="condition-cell">
                                <span>状态</span>
                            </div>
                        </div>
                        <div class="name-wrapper">
                            <div class="name-cell">
                                <span>活动名称</span>
                            </div>
                        </div>
                        <div class="begTime-wrapper" v-show="!contentHidden">
                            <div class="begTime-cell">
                                <span>开始时间</span>
                            </div>
                        </div>
                        <div class="closeTime-wrapper" v-show="!contentHidden">
                            <div class="closeTime-cell">
                                <span>关闭时间</span>
                            </div>
                        </div>
                        <div class="openTime-wrapper">
                            <div class="openTime-cell">
                                <span>打开时间</span>
                            </div>
                        </div>
                        <div class="tot-wrapper" v-show="!contentHidden">
                            <div class="tot-person">
                                <span>参与人数</span>
                            </div>
                        </div>
                        <div class="operation-wrapper" v-show="!isMobile">
                            <div class="operation-cell">
                                <span>操作</span>
                            </div>
                        </div>
                        <div class="operation-wrapper--mobile" v-show="isMobile">
                            <div class="operation-cell">
                                <span>操作</span>
                            </div>
                        </div>
                    </div>
                    <div class="list-middle">
                        <el-popover
                            placement="bottom"
                            trigger="click"
                            :width="isMobile ? '300px' : '400px'"
                            v-for="a in activityList"
                        >
                            <template #reference>
                                <div class="list-cell">
                                    <div class="cell-condition" style="fontSize:10px;">
                                        <van-tag round type="primary" v-show="a.state==1" color="#4fc558">进行中</van-tag>
                                        <van-tag round type="primary" v-show="a.state==0" color="#ead72f">未开始</van-tag>
                                        <van-tag round type="primary" v-show="a.state==2" color="#6969bd">已关闭</van-tag>
                                        <van-tag round type="primary" v-show="a.state==3" color="#da3232">已删除</van-tag>
                                        <van-tag round type="primary" v-show="a.state==4" color="#bbbbbb">已结束</van-tag>
                                    </div>
                                    <div class="cell-name">
                                        <span>{{a.title}}</span>
                                    </div>
                                    <div class="cell-begTime" v-show="!contentHidden">
                                        <span>{{a.startTime}}</span>
                                    </div>
                                    <div class="cell-closeTime" v-show="!contentHidden">
                                        <span>{{a.endTime}}</span>
                                    </div>
                                    <div class="cell-openTime">
                                        <span>{{a.openTime}}</span>
                                    </div>
                                    <div class="cell-tot" v-show="!contentHidden">
                                        <span>{{a.number}}</span>
                                    </div>
                                    <div class="cell-operation" v-show="!isMobile">
                                        <div class="open-or-close" v-show="!isMobile">
                                            <div class="btn-wrapper-open" @click.stop="showConfirmOpen=true,operationInfo.id = a.id">
                                                <div class="open-icon" v-show="a.state==0" style="marginTop: 2px;">
                                                    <svg class="icon" aria-hidden="true" color="#4db0e4">
                                                        <use xlink:href="#icon-dianyuan"></use>
                                                    </svg>
                                                </div>
                                                <div class="open-text" style="color:#4db0e4;" v-show="a.state==0">
                                                    <span>打开</span>
                                                </div>
                                            </div>
                                            <div class="btn-wrapper-close" @click.stop="showConfirmClose=true,operationInfo.id = a.id">
                                                <div class="close-icon" v-show="a.state==1" style="marginTop: 2px;">
                                                    <svg class="icon" aria-hidden="true" color="#df4834">
                                                        <use xlink:href="#icon-dianyuan"></use>
                                                    </svg>
                                                </div>
                                                <div class="close-text" style="color:#df4834;" v-show="a.state==1">
                                                    <span>关闭</span>
                                                </div>
                                            </div>
                                            <div class="nor-icon" v-show="a.state!=1 && a.state!=0" style="marginTop: 2px;">
                                                <svg class="icon" aria-hidden="true" color="white">
                                                    <use xlink:href="#icon-dianyuan"></use>
                                                </svg>
                                            </div>
                                            <div class="close-text" style="color:white;" v-show="a.state!=1 && a.state!=0">
                                                <span>关闭</span>
                                            </div>
                                            <div class="open-icon" v-show="a.state!=0 && a.state!=1 && a.state != 4" style="marginTop: 2px;">
                                                <svg class="icon" aria-hidden="true" color="white">
                                                    <use xlink:href="#icon-dianyuan"></use>
                                                </svg>
                                            </div>
                                            <div class="open-text" style="color:white;" v-show="a.state!=0 && a.state!=1 && a.state!=4">
                                                <span>打开</span>
                                            </div>
                                        </div>
                                        <div class="find-more-content" v-show="!isMobile">
                                            <div class="btn-wrapper-eye" @click.stop="poolEye(a.id)">
                                                <div class="find-icon" style="marginTop: 3px;" v-show="a.state!=3">
                                                    <van-icon name="eye-o"/>
                                                </div>
                                                <div class="find-text" v-show="a.state!=3">
                                                    <span>详情</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="delete-activity" v-show="!isMobile">
                                            <div class="btn-wrapper-del" @click.stop="showConfirmDel=true,operationInfo.id = a.id">
                                                <div class="delete-icon" style="marginTop: 3px;" v-show="a.state!=3">
                                                    <van-icon name="delete-o" color="#e25644"/>
                                                </div>
                                                <div class="delete-text" style="color: #e25644;" v-show="a.state!=3">
                                                    <span>删除</span>
                                                </div>
                                            </div>
                                            <div class="btn-wrapper-eye" @click.stop="poolEye(a.id)">
                                                <div class="find-icon" style="marginTop: 3px;" v-show="a.state==3">
                                                    <van-icon name="eye-o"/>
                                                </div>
                                                <div class="find-text" v-show="a.state==3">
                                                    <span>详情</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cell-operation--mobile" v-show="isMobile">
                                        <div class="more-operation">
                                            <el-dropdown trigger="click">
                                                <div @click.stop>
                                                    <el-icon class="more-svg" size="19">
                                                        <MoreFilled/>
                                                    </el-icon>
                                                </div>
                                                <template #dropdown>
                                                    <el-dropdown-menu>
                                                        <el-dropdown-item :icon="SwitchButton" style="color: #6acff5;" @click="showConfirmOpen=true,operationInfo.id = a.id" v-if="a.state==0">打开</el-dropdown-item>
                                                        <el-dropdown-item :icon="SwitchButton" style="color: #efa49a;" @click="showConfirmClose=true,operationInfo.id = a.id" v-if="a.state==1">关闭</el-dropdown-item>
                                                        <el-dropdown-item :icon="View" style="color: #182831" @click="poolEye(a.id)">详情</el-dropdown-item>
                                                        <el-dropdown-item :icon="Delete" style="color: #efa49a" @click="showConfirmDel=true,operationInfo.id = a.id" v-if="a.state!=3">删除</el-dropdown-item>
                                                    </el-dropdown-menu>
                                                </template>
                                            </el-dropdown>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <template #default>
                                <span>活动名称：{{ a.title }}</span><br>
                                <span>持续时间：{{ a.startTime }} -- {{ a.endTime }}</span><br>
                                <span>参与人数：{{ a.number }}</span>
                            </template>
                        </el-popover>
                    </div>
                    <div class="list-bottom">
                        <div class="create-wrapper" @click="addActivity">
                            <div class="create-icon">
                                <van-icon name="add-o"/>
                            </div>
                            <div class="create-text">
                                <span>新建活动</span>
                            </div>
                        </div>
                    </div>
                    <van-dialog v-model:show="showDialog" title="创建新活动" showCancelButton @cancel="cancelCreate()" @confirm="showConfirmCreate = true">
                        <div style="margin: 10px 25px 10px 25px;">
                            <van-field required label=" " label-width="1px" placeholder="请输入活动名称" v-model="cellForm.title" style="backgroundColor: #fdfaf6;borderRadius: 10px;fontSize:16px;whiteSpace: nowrap;" maxlength="15"/>
                        </div>
                        <div style="margin: 10px 25px 10px 25px;">
                            <van-field required label=" " type="textarea" label-width="1px" placeholder="请输入活动描述" v-model="cellForm.content" style="backgroundColor: #fdfaf6;borderRadius: 10px;fontSize:16px;whiteSpace: nowrap;" maxlength="15"/>
                        </div>
                        <div style="margin: 10px 25px 10px 25px;">
                            <van-field  required label=" " label-width="1px" placeholder="请输入开始时间" v-model="cellForm.startTime" @click="showCalendar_one = true" right-icon="calendar-o" readonly style="backgroundColor: #fdfaf6;borderRadius: 10px;fontSize:16px;whiteSpace: nowrap;" poppable="false"/>
                            <van-calendar v-model:show="showCalendar_one" color="#55ccc9" @confirm="onConfirmCal_one"/>
                        </div>
                        <div style="margin: 10px 25px 10px 25px;">
                            <van-field  required label=" " label-width="1px" placeholder="请输入关闭时间" v-model="cellForm.endTime" @click="showCalendar_two = true" right-icon="calendar-o" readonly style="backgroundColor: #fdfaf6;borderRadius: 10px;fontSize:16px;whiteSpace: nowrap;"/>
                            <van-calendar v-model:show="showCalendar_two" color="#55ccc9" @confirm="onConfirmCal_two"/>
                        </div>
                        <div style="margin: 10px 25px 10px 25px;">
                            <van-field  required label=" " label-width="1px" placeholder="请输入打开时间" v-model="cellForm.openTime" @click="showCalendar_three = true" right-icon="calendar-o" readonly style="backgroundColor: #fdfaf6;borderRadius: 10px;fontSize:16px;whiteSpace: nowrap;"/>
                            <van-calendar v-model:show="showCalendar_three" color="#55ccc9" @confirm="onConfirmCal_three"/>
                        </div>
                    </van-dialog>
                    <van-dialog v-model:show="showConfirmClose" title="注意" show-cancel-button @confirm="poolClose">
                        <div style="fontSize: 16px; margin: 8px 6px 8px 6px; textAlign: center;">
                            <span>关闭后，用户将不能新建或修改发言，是否确认关闭？</span>
                        </div>
                    </van-dialog>
                    <van-dialog v-model:show="showConfirmOpen" title="注意" show-cancel-button @confirm="poolOpen">
                        <div style="fontSize: 16px; margin: 8px 6px 8px 6px; textAlign: center;">
                            <span>打开后，用户将能够参与活动，是否确认打开？</span>
                        </div>
                    </van-dialog>
                    <van-dialog v-model:show="showConfirmDel" title="注意" show-cancel-button @confirm="poolDelete">
                        <div style="fontSize: 16px; margin: 8px 6px 8px 6px; textAlign: center;">
                            <span>删除后，此活动将不再对用户显示，是否确认删除？</span>
                        </div>
                    </van-dialog>
                    <van-dialog v-model:show="showConfirmPub" title="注意" show-cancel-button>
                        <div style="fontSize: 16px; margin: 8px 6px 8px 6px; textAlign: center;">
                            <span>发布后，将不能再次修改活动内容。是否确认发布？</span>
                        </div>
                    </van-dialog>
                    <van-dialog v-model:show="showConfirmCreate" title="注意" show-cancel-button @cancel="showDialog = true" @confirm="createCapPool">
                        <div style="fontSize: 16px; margin: 8px 6px 8px 6px; textAlign: center;">
                            <span>发布后，将不能进行修改。是否确认发布？</span>
                        </div>
                    </van-dialog>
                    <el-drawer v-model="showNav" direction="ltr" :show-close="false">
                        <div class="nav-sidebar">
                            <div class="sidebar-content">
                                <div class="content-btn" style="color: #4093de;">
                                    <van-icon name="manager" style="marginRight: 6px; marginTop: 3px; color: #4093de;"/>
                                    <span>活动管理</span>
                                </div>
                                <div class="report-btn" @click="eyeActivity" style="color: black;">
                                    <van-icon name="eye" style="marginRight: 6px; marginTop: 3px;"/>
                                    <span>举报管理</span>
                                </div>
                            </div>
                        </div>
                    </el-drawer>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted,computed,watch } from 'vue'
import { useRoute,useRouter } from 'vue-router';
import router from '../router';
import { useGlobalData } from '../store/index'
import { MoreFilled,SwitchButton,Delete,View } from '@element-plus/icons-vue';
import { getAllPoolInfo,addPool,openPool,closePool,deletePool } from '../request/api';
import { ElLoading } from 'element-plus';
const GlobalData = useGlobalData();
const root = ref<HTMLElement>();
var shrinkPage = computed(() => {
    return GlobalData.width <= 852;
})
var contentHidden = computed(() => {
    return GlobalData.width <= 688;
})
var isMobile = computed(() => {
    return GlobalData.width < 598;
})
interface ListCell{
    id: string,
    title: string,
    state: number,
    participated: string,
    startTime: string,
    endTime: string,
    openTime: string,
    number: number,
}
interface CellForm{
    title: string,
    content: string,
    picture: string[],
    startTime: string,
    endTime: string,
    openTime: string,
}
interface PoolInfo{  //all 获取所有 open 获取打开状态的 close关闭状态的
    type: string
}
interface OperationInfo{
    id: string
}
interface Options {
    lock: boolean,
    text: string,
    background: string,
}
const options: Options = {
    lock: true,
    text: "Loading...",
    background: 'rgba(0,0,0,0.7)'
}
var showDialog = ref<boolean>(false);
var showCalendar_one = ref<boolean>(false);
var showCalendar_two = ref<boolean>(false);
var showCalendar_three = ref<boolean>(false);
var showConfirmClose = ref<boolean>(false);
var showConfirmOpen = ref<boolean>(false);
var showConfirmDel = ref<boolean>(false);
var showConfirmPub = ref<boolean>(false);
var showConfirmCreate = ref<boolean>(false);
var showNav = ref<boolean>(false);
var poolInfo = reactive<PoolInfo>({
    type: "all",
})
var activityList = reactive<ListCell[]>([
    
])
var cellForm = reactive<CellForm>({
    title: "",
    content: "",
    picture: [],
    startTime: "",
    endTime: "",
    openTime: "",
})
var operationInfo = reactive<OperationInfo>({
    id: "",
})
let fontSize_one:string = "20px";
let fontSize_two:string = "19px";
let fontSize_three:string = "17px";
let fontSize_four:string = "16.5px";
const addActivity = () => {
    showDialog.value = true
}
const formatDate = (date:any) => {
    let year = date.getFullYear();
    year = String(year);
    let month = date.getMonth() + 1;
    month = String(month)
    if(month < 10) month = '0' + month;
    let day = date.getDate();
    day = String(day);
    if(day < 10) day = '0' + day;
    return year + '-' + month + '-' + day;
}
const onConfirmCal_one = (value:any) => {
    showCalendar_one.value = false;
    cellForm.startTime = formatDate(value);
}
const onConfirmCal_two = (value:any) => {
    showCalendar_two.value = false;
    cellForm.endTime = formatDate(value);
}
const onConfirmCal_three = (value:any) => {
    showCalendar_three.value = false;
    cellForm.openTime = formatDate(value);
}
const cancelCreate = () => {
    cellForm.title = "";
    cellForm.content = "";
    cellForm.startTime = "";
    cellForm.endTime = "";
    cellForm.openTime = "";
}
const refresh = () => {
    let loading = ElLoading.service(options);
    activityList.length = 0;
    getAllPoolInfo(poolInfo).then((res:any) => {
        console.log(res);
        let len = res.result.length;
        for(let i=0;i<len;i++){
            activityList.push(res.result[i]);
            activityList[i].startTime = activityList[i].startTime.slice(0,10);
            activityList[i].endTime = activityList[i].endTime.slice(0,10);
            activityList[i].openTime = activityList[i].openTime?.slice(0,10);
        }
        loading.close();
    })
}
const createCapPool = () => {
    addPool(cellForm).then((res:any) => {
        console.log(res);
        refresh();
    })
}
const poolOpen = () => {
    console.log(operationInfo.id);
    openPool(operationInfo).then((res:any) => {
        console.log(res);
        refresh();
    })
}
const poolClose = () => {
    closePool(operationInfo).then((res:any) => {
        console.log(res);
        refresh();
    })
}
const poolDelete = () => {
    deletePool(operationInfo).then((res:any) => {
        console.log(res);
        refresh();
    })
}
const poolEye = (id:string) => {
    router.push({
        name: 'offiactivity',
        query: {
            poolId: id,
        }
    })
}
const eyeActivity = () => {
    router.push({
        name: 'report',
    })
}
const ActivityControl = () => {
    router.push({
        name: 'activityControl',
    })
}
const handleResize = () => {
    GlobalData.width = root.value?.clientWidth as number;
    GlobalData.height = root.value?.clientHeight as number;
}
const beforeShowNav = () => {
    showNav.value = true;
}
window.addEventListener('resize',() => handleResize());
watch(isMobile,(newVal) => {
    if(newVal == true){
        fontSize_one = '17px';
        fontSize_two = '16px';
        fontSize_four = '14px';
        fontSize_three = '14px';
    }
},{
    immediate:true,
})
onMounted(() => {
    handleResize();
    getAllPoolInfo(poolInfo).then((res:any) => {
        console.log(res);
        let len = res.result.length;
        for(let i=0;i<len;i++){
            activityList.push(res.result[i]);
            activityList[i].startTime = activityList[i].startTime.slice(0,10);
            activityList[i].endTime = activityList[i].endTime.slice(0,10);
            activityList[i].openTime = activityList[i].openTime?.slice(0,10);
        }
    })
})
</script>
<style lang="less">
    :root{
        --van-tag-font-size: 9px !important;
        --van-dialog-font-size: 14px !important;
        --van-calendar-popup-height: 100% !important;
    }
    .el-drawer{
        --el-drawer-padding-primary: 0px;
        width: auto !important;
        .nav-sidebar{
            background-color: white !important;
        }
    }
</style>
<style scoped lang="less">
    .root{
        height: 100%;
        .nav-wrapper-lefttoright{
            display: flex;
            height: 100%;
            
            .nav-sidebar{
                background-color: #55ccc9;
                width: 180px;
                .title-wrapper-one{
                    display: flex;
                    height: 34px;
                    border-bottom: 2px solid rgb(100, 214, 210);
                    .title-icon{
                        display: flex;
                        height: 25px;
                        width: 25px;
                        align-self: center;
                        margin-left: 25px;
                        margin-top: 3px;
                        .icon-img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .title-text-one{
                        margin-left: 5px;
                        font-size: v-bind(fontSize_one);
                        line-height: 36px;
                        font-weight: bold;
                        color: white;
                    }
                }
                .sidebar-content{
                    display: flex;
                    flex-direction: column;
                    .content-btn{
                        color: #4093de;
                        font-size: v-bind(fontSize_two);
                        height: 36px;
                        line-height: 36px;
                        padding: 0px 20px 0px 40px;
                    }
                    .report-btn{
                        color: white;
                        font-size: v-bind(fontSize_two);
                        height: 36px;
                        line-height: 36px;
                        padding: 0px 20px 0px 40px;
                    }
                    .content-btn:hover{
                        background-color: #d9d9d9;
                        cursor: pointer;
                    }
                    .report-btn:hover{
                        background-color: #d9d9d9;
                        cursor: pointer;
                    }
                }
            }
            .nav-body{
                display: flex;
                flex-direction: column;
                height: 100%;
                width: 100%;
                .nav-header{
                    display: flex;
                    width: 100%;
                    height: 34px;
                    background-color: white;
                    border-bottom: 2px solid rgb(243, 244, 245);
                    .mobile-icon{
                        align-self: center;
                        margin-left: 4px;
                        cursor: pointer;
                    }
                    .title-wrapper-two{
                        display: flex;
                        .title-text-two{
                            font-size: v-bind(fontSize_one);
                            line-height: 36px;
                        }
                        .title-text-three{
                            font-size: v-bind(fontSize_one);
                            line-height: 36px;
                            color: rgb(151, 168, 190);
                        }
                        .title-text-four{
                            font-size: v-bind(fontSize_one);
                            line-height: 36px;
                            color: rgb(151, 168, 190);
                        }
                    }
                }
                .nav-content{
                    .list-top{
                        display: flex;
                        margin: 10px 10px 10px 10px;
                        background-color: rgb(244, 244, 245);
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        border-radius: 10px;
                        font-size: v-bind(fontSize_three);
                        font-weight: bold;
                        box-shadow: 1px 1px 3px rgb(125 159 204 / 50%);
                        .condition-wrapper{
                            flex: 1 1 0%;
                        }
                        .name-wrapper{
                            flex: 1 1 0%;
                        }
                        .begTime-wrapper{
                            flex: 1 1 0%;
                        }
                        .closeTime-wrapper{
                            flex: 1 1 0%;
                        }
                        .openTime-wrapper{
                            flex: 1 1 0%;
                        }
                        .tot-wrapper{
                            flex: 1 1 0%;
                        }
                        .operation-wrapper{
                            flex: 2 1 0%;
                        }
                        .operation-wrapper--mobile{
                            flex: 1 1 0%;
                        }
                    }
                    .list-middle{
                        margin: 10px 10px 0px 10px;
                        .list-cell{
                            display: flex;
                            text-align: center;
                            font-size: v-bind(fontSize_four);
                            padding-top: 10px;
                            padding-bottom: 10px;
                            border-bottom: 2px solid rgb(236, 239, 246);
                            .cell-condition{
                                flex: 1 1 0%;
                            }
                            .cell-name{
                                flex: 1 1 0%;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                            .cell-begTime{
                                flex: 1 1 0%;
                            }
                            .cell-closeTime{
                                flex: 1 1 0%;
                            }
                            .cell-openTime{
                                flex: 1 1 0%;
                            }
                            .cell-tot{
                                flex: 1 1 0%;
                            }
                            .cell-operation{
                                flex: 2 1 0%;
                                display: flex;
                                justify-content: space-evenly;
                                .open-or-close{
                                    display: flex;
                                    .btn-wrapper-open{
                                        display: flex;
                                        padding-top: 1px;
                                        padding-bottom: 1px;
                                        border-radius: 7px;
                                    }
                                    .btn-wrapper-close{
                                        display: flex;
                                        padding-top: 1px;
                                        padding-bottom: 1px;
                                        border-radius: 7px;
                                    }
                                    .btn-wrapper-open:hover,.btn-wrapper-close:hover{
                                        background-color: rgb(243, 244, 245);
                                        cursor: pointer;
                                    }
                                }
                                .find-more-content{
                                    display: flex;
                                    .btn-wrapper-eye{
                                        display: flex;
                                        padding: 1px 2px 1px 2px;
                                        border-radius: 7px;
                                    }
                                    .btn-wrapper-eye:hover{
                                        background-color: rgb(243, 244, 245);
                                        cursor: pointer;
                                    }
                                }
                                .delete-activity{
                                    display: flex;
                                    .btn-wrapper-del{
                                        display: flex;
                                        border-radius: 7px;
                                    }
                                    .btn-wrapper-eye{
                                        display: flex;
                                        border-radius: 7px;
                                    }
                                    .btn-wrapper-del:hover,.btn-wrapper-eye:hover{
                                        background-color: rgb(243, 244, 245);
                                        cursor: pointer;
                                    }
                                }
                            }
                            .cell-operation--mobile{
                                flex: 1 1 0%;
                                .more-operation{
                                    transform: rotate(90deg);
                                    .more-svg{
                                        cursor: pointer;
                                    }
                                }
                            }
                        }
                        .list-cell:hover{
                            transform: scale(1.01);
                        }
                    }
                    .list-bottom{
                        display: flex;
                        justify-content: center;
                        .create-wrapper{
                            display: flex;
                            font-size: v-bind(fontSize_three);
                            border-radius: 10px;
                            padding: 2px 4px 2px 4px;
                            margin-top: 20px;
                            .create-icon{
                                margin-top: 2.2px;
                                margin-right: 1px;
                            }
                        }
                        .create-wrapper:hover{
                            background-color: rgb(243, 244, 245);
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
</style>